<template>
  <div class='container'>
    <el-card class="choiceness">
      <span class="fontColor">
        说明：目前支持学科和关键字条件筛选
      </span>
      <el-row type="flex" justify="end" class="btn_wrapper">
        <el-button icon="el-icon-edit" type="success" size="small" @click="$router.push('/questions/new')">新增试题</el-button>
      </el-row>
      <el-form :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select placeholder="请选择" @change="getList" v-model="form.subjectID" style="width: 100%;">
                <el-option v-for="item in  SubjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="form.catalogID" style="width: 100%;">
                <el-option v-for="item in  list" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" v-model="form.tags" style="width: 100%;">
                <el-option v-for="item in TagsSimpleList" :key="item.id" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="根据题干搜索" v-model="form.keyword" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="form.questionType" style="width: 100%;">
                <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select placeholder="请选择" v-model="form.difficulty" style="width: 100%;">
                <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="form.direction" style="width: 100%;">
                <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select placeholder="请选择" v-model="form.creatorID" style="width: 100%;">
                <el-option label="超级管理员" :value="2"></el-option>
                <el-option label="录入管理员" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市">
              <el-select v-model="form.province" @change="ChangeProvince" style="width: 150px;" placeholder="请选择">
                <el-option v-for="(item,index) in province" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <el-select v-model="form.city" style="width: 150px;" placeholder="请选择">
                <el-option v-for="(item,index) in city" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-form-item class="right">
            <el-button size="mini" @click="hClose">清除</el-button>
            <el-button size="mini" type="primary" @click="hSearch">搜索</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- tabs 组件 -->
      <el-tabs @tab-click="hTab" v-model="activeName" type="card">
        <el-tab-pane label="全部" name="all">
        </el-tab-pane>
        <el-tab-pane label="待审核" name="one">
          <!-- <questionList :chkState="0" /> -->
        </el-tab-pane>
        <el-tab-pane label="已审核" name="two">
          <!-- <questionList :chkState="1" /> -->
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="three">
          <!-- <questionList :chkState="2" /> -->
        </el-tab-pane>
      </el-tabs>
      <questionList ref="filterList" :chkState="chkState" />
    </el-card>
  </div>
</template>

<script>
import questionList from '../components/question-bank.vue'
import { simple } from '../../api/hmmm/subjects' // 学科
import { list } from '../../api/hmmm/directorys' // 目录
import { simple as TagsSimpleList } from '../../api/hmmm/tags' // 标签
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
// import { choice } from '../../api/hmmm/questions'
export default {
  components: { questionList },
  data () {
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在地省份
        city: '' // 企业所在城市

      },
      activeName: 'all',
      SubjectList: [],
      list: [],
      TagsSimpleList: [],
      questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction,
      province: [...provinces()],
      city: [],
      FilterForm: {},
      chkState: null
    }
  },
  created () {
    this.getSubject()
    this.TagsList()
  },
  methods: {
    // 获取学科列表
    async getSubject () {
      try {
        const { data } = await simple()
        this.SubjectList = data
      } catch (e) {
        console.log(e)
      }
    },
    // 获取二级目录列表
    async getList () {
      try {
        const res = await list({ subjectID: this.form.subjectID })
        this.list = res.data.items
      } catch (e) {
        console.log(e)
      }
    },
    // 获取标签列表
    async TagsList () {
      try {
        const { data } = await TagsSimpleList()
        this.TagsSimpleList = data
        // console.log(this.TagsSimpleList)
      } catch (e) {
        console.log(e)
      }
    },
    // 获取地区
    ChangeProvince () {
      this.city = citys(this.form.province)
    },
    // 清除数据
    hClose () {
      this.form = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在地省份
        city: '' // 企业所在城市

      }
      this.$refs.filterList.getChoicenessList()
    },
    // 搜索
    async hSearch () {
      this.$refs.filterList.getChoicenessList(this.form)
    },
    // tab 切换
    hTab () {
      const q = {
        page: 1,
        size: 10,
        chkState: null
      }
      if (this.activeName === 'one') {
        q.chkState = 0
        this.$refs.filterList.getChoicenessList(q)
      } else if (this.activeName === 'two') {
        q.chkState = 1
        this.$refs.filterList.getChoicenessList(q)
      } else if (this.activeName === 'three') {
        q.chkState = 2
        this.$refs.filterList.getChoicenessList(q)
      } else {
        this.$refs.filterList.getChoicenessList(q)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10px 10px;
}
.btn_wrapper {
  margin-bottom: 15px;
}
.el-col {
  float: left;
}
.right {
  float: right;
}
.fontColor {
  color: pink;
  font-size: 14px;
}
</style>
